<template>
  <view class="hotCancel">
    <view class="" v-show="loadingFlag">
      <view class="userMsg">
        <view class="userMsg-l">
          <image style="width: 100rpx; height: 100rpx; border-radius: 50%;overflow:hidden;" :src="hotTicketForm.userHref " mode=""></image>
        </view>
        <view class="userMsg-r">
          <view class="userMsg-r-t">
            {{hotTicketForm.userMobile}}
          </view>
          <view class="userMsg-r-b">
            下单时间:{{hotTicketForm.orderCreateTime}}
          </view>
        </view>
      </view>
      <view class="cancelShopBox">
        <view class="cancelShop">
          <image class="imageMsg" :src="hotTicketForm.imageUrl" mode=""></image>
          <view class="modalBox"><text class="modalBoxTxt">￥</text>{{hotTicketForm.price}}</view>
        </view>
        <view class="cancelShopTxt">{{hotTicketForm.productTile}}</view>
      </view>
      <view class="btnBottom">
        <view class="cancelBtnDiv">
          <button class="cancelBtn" @click="cancel">取消</button>
        </view>
        <view class="affirmBtnDiv">
          <button class="affirmBtn" @click="affirmAudit">确认审核</button>
        </view>
      </view>
    </view>
    <view class="loading" v-show="!loadingFlag">
      <view class="loadingImg">
        <image style="width: 340rpx; height: 340rpx;" :src="image" mode=""></image>
      </view>
      {{loadingText}}
    </view>
  </view>
</template>

<script>
import { ticketConfirm,scanTicket } from "@/service/chargeOff/chargeOff.service.js"
import { decideEnv, setWxConfigSync, isIOS } from '@/unit/common.js';
export default {
  data () {
    return {
      hotTicketForm: {
        imageUrl: '', // 商品主图
        userMobile: '', // 购买人手机号  
        orderCreateTime: '', //  下单时间  
        productTile: '', //  商品标题
        price: '', //售价
        userHref: '', // 下单人头像
      },
      idCode:'',
      loadingText: '加载中...',
      image: this.$store.state.imgBaseUrl + '/notShop.png',
      loadingFlag: false,
    }
  },
  onLoad (option) {
    this.idCode = option.t;
  },
  onShow() {
    uni.showLoading();
    this.scanTickets();
  },
  methods: {
    affirmAudit () {
      this.ticketConfirms();
    },
    scanTickets () { // 扫描二维码获取信息
      scanTicket({id:this.idCode}, res => {
        if(res.status == 0) {
          this.loadingFlag = true;
          this.hotTicketForm = res.data
          uni.hideLoading();
          return
        }
        this.loadingText = res.msg;
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
      })
    },
    ticketConfirms () {//确认核销
      ticketConfirm({id:this.idCode},res => {
        if(res.status == 0) {
          if(res.data == true) {
            uni.navigateTo({
              url: 'auditStatus?status=0&' + 'price=' + this.hotTicketForm.price
            });
          }
        }else {
          uni.navigateTo({
            url: 'auditStatus?status=1'
          });
        }
      })
    },
    cancel () {
      let that = this;
      if (decideEnv() && decideEnv() == 'wx' && !isIOS()) {
        setWxConfigSync().then(jswx => {
          jswx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              // #ifdef H5
              window.open(result, '_self');
              // #endif
            }
          });
        });
      } else if (decideEnv() && decideEnv() == 'wx' && isIOS()) {
        that.$jswx.ready(function () {
          that.$jswx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              // #ifdef H5
              window.open(result, '_self');
              // #endif
            }
          });
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .hotCancel {
    .userMsg {
      padding: 60rpx 50rpx 0 50rpx;
      .userMsg-l {
        display: inline-block;
      }
      .userMsg-r {
        display: inline-block;
        margin-left: 20rpx;
        .userMsg-r-t {
          font-size:28rpx;
          font-weight:700;
        }
        .userMsg-r-b {
          font-size:26rpx;
          line-height: 60rpx;
          font-weight:500;
          color:rgba(153,153,153,1);
        }
      }
    }
    .cancelShopBox {
      padding: 0 50rpx;
      margin-top: 126rpx;
      .cancelShop {
        .imageMsg {
          position: relative;
          width: 400rpx;
          height: 400rpx;
          border-radius: 20rpx;
        }
        .modalBox {
          position: relative;
          width: 400rpx;
          height:70rpx;
          background:rgba(51,51,51,1);
          opacity:0.6;
          bottom: 85rpx;
          border-bottom-left-radius: 20rpx;
          border-bottom-right-radius: 20rpx;
          font-size:50rpx;
          font-weight:500;
          color:rgba(255,255,255,1);
          line-height: 70rpx;
          margin: auto;
          .modalBoxTxt {
            font-size:36rpx;
            font-weight:500;
            color:rgba(255,255,255,1);
          }
        }
        text-align: center;
      }
      .cancelShopTxt {
        margin-top: 55rpx;
        text-indent:2em;
        font-size:30rpx;
        font-weight:bold;
        color:rgba(51,51,51,1);
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
      }
    }
    .btnBottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100rpx;
      border-top: 1px solid rgba(225,225,225,1);
      display: flex;
      align-content: space-between;
      line-height: 100rpx;
      .cancelBtnDiv {
        margin: auto;
        .cancelBtn {
          width:259rpx;
          height:70rpx;
          font-size: 30rpx;
          background:rgba(246,218,153,1);
          border-radius:10rpx;
        }
      }
      .affirmBtnDiv {
        margin: auto;
        .affirmBtn {
          width:407rpx;
          height:70rpx;
          font-size: 30rpx;
          border-radius:10rpx;
          background:rgba(67,67,67,1);
          color: #F6DA99;
        }
      }
    }
		.loading {
      padding-top: 300rpx;
			text-align: center;
			font-size: 26rpx;
			color: #999999;
		}
  }
</style>
